<template>
	<div class="markdown">
		<div class="left">
			<!-- 左侧侧边栏 -->
			<left-column></left-column>
			<!-- 我的文章和草稿 -->
			<el-menu active-text-color="#000000" default-active="1" class="el-menu-vertical-demo">
				<!-- 我的文章 -->
				<el-submenu index="1">
					<template slot="title">
						<svg class="icon" aria-hidden="true" @click.stop="addNewNote" style="font-size: 16px;position: absolute;left: 5%;top: 50%;transform: translateY(-50%);">
							<use xlink:href="#icon-jiahao"></use>
						</svg>
						<svg class="icon" aria-hidden="true" style="margin-right:10px;font-size: 16px;"><use xlink:href="#icon-xiewenzhang"></use></svg>
						<span>我的笔记</span>
					</template>
					<el-divider></el-divider>
					<div v-bind:key="index" v-for="(item, index) in fileList" @click="onFile([item, index, 'note'])" @mouseenter="hover(index)" @mouseleave="mover()">
						<el-menu-item style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap; ">
							<!-- 删除当前稿子 -->
							<svg @click="deleteFile(index)" class="icon delete" aria-hidden="true" style="margin-right:10px" v-show="trashIndex === index">
								<use xlink:href="#icon-del"></use>
							</svg>
							<svg class="icon" aria-hidden="true" style="margin-right:10px"><use xlink:href="#icon-wenzhang"></use></svg>
							{{ item.topic }}
						</el-menu-item>
					</div>
				</el-submenu>
				<!-- 草稿箱 -->
				<el-submenu index="2">
					<template slot="title">
						<svg class="icon" aria-hidden="true" style="margin-right:10px"><use xlink:href="#icon-icon-test"></use></svg>
						<span>草稿箱</span>
					</template>
					<el-divider></el-divider>
					<div v-bind:key="index" v-for="(item, index) in draftList" @click="onFile([item, index, 'draft'])" @mouseenter="hoverCrash(index)" @mouseleave="moverCrash()">
						<el-menu-item style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							<!-- 删除当前稿子 -->
							<svg @click="deleteDraft(index)" class="icon delete" aria-hidden="true" style="margin-right:10px" v-show="trashIndex1 === index">
								<use xlink:href="#icon-del"></use>
							</svg>
							<svg class="icon" aria-hidden="true" style="margin-right:10px"><use xlink:href="#icon-kehuishouwu-feizhilei"></use></svg>
							{{ item.topic }}
						</el-menu-item>
					</div>
				</el-submenu>
			</el-menu>
		</div>
		<div class="all">
			<!-- 主体内容 -->
			<form method="post" id="form" class="form" @change="fileChange">
				<div class="top">
					<input type="text" placeholder="请输入标题" v-model="formMess.topic" class="title" />
					<button v-show="newNote" class="button" @click.prevent="formSub('newNote')">保存文章</button>
					<button v-show="newNote" class="button" @click.prevent="formSub('draft')">存为草稿</button>
					<button v-show="!newNote" class="button" @click.prevent="formSub('article')">{{ isDraft ? '更新草稿' : '更新文章' }}</button>
					<button v-show="!newNote && isDraft" class="button" @click.prevent="formSub('draftToNote')">发布文章</button>
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
							<img :src="require('../headImg/' + srcImg + '.jpg')" style="width: 40px; height: 40px;cursor: pointer; border-radius: 50%;" />
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item @click.native="changeIntr">个性签名：{{ introduce }}</el-dropdown-item>
							<el-dropdown-item>昵称：{{ username }}</el-dropdown-item>
							<el-dropdown-item><div @click="offline">下线</div></el-dropdown-item>
							<el-dropdown-item>
								<el-upload
									class="avatar-uploader"
									action="http://localhost:8000/user/update/portrait"
									:headers="myheader"
									:data="mydata"
									:with-credentials="true"
									:show-file-list="false"
									:on-success="handleAvatarSuccess"
									:before-upload="beforeAvatarUpload"
								>
									<!-- 							<input type="file" id="files" style="display: none"  />
								<input type="button" id="fileImport" value="导入" @click="fileImport" /> -->
									修改头像
								</el-upload>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<textarea
					style="font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;word-break: break-word!important;;"
					placeholder="畅所欲言吧"
					v-model="formMess.content"
					class="content"
				></textarea>
			</form>
		</div>
	</div>
</template>

<script>
import leftColumn from './leftColumn.vue';
export default {
	components: {
		leftColumn
	},
	data() {
		return {
			/* 个人信息 */
			username: localStorage.getItem('username'),
			introduce: localStorage.getItem('introduce'),
			myheader: {
				['Content-Type']: 'application/json'
			},
			mydata: {
				uid: localStorage.getItem('uid'),
				portrait: null
			},

			index: '随手记',
			formMess: {
				topic: '',
				content: ''
			},
			fileList: [],
			fileIndex: null,
			draftList: [],
			draftIndex: null,
			//设置垃圾箱的
			trashIndex: '',
			trashIndex1: '',

			//用来判断是不是新文章的
			newNote: true,
			//判断是否是草稿
			isDraft: false,
			//用来判断文章变化了没有
			fileChanged: false,

			//上传文件
			form: {
				imgSavePath: ''
			},
			srcImg:localStorage.getItem('portrait')
		};
	},
	computed: {
	},
	methods: {
		fileImport() {
			var selectedFile = document.getElementById('files').files[0];
			var name = selectedFile.name; //读取选中文件的文件名
			var size = selectedFile.size; //读取选中文件的大小
			console.log('文件名:' + name + '大小:' + size);

			var reader = new FileReader(); //这是核心,读取操作就是由它完成.
			//reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
			reader.onload = function() {
				//当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
				console.log(this.result);
			};
		},

		offline() {
			this.$confirm('是否下线?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$api.offLine(localStorage.getItem('uid')).then(res => {
						console.log(res);
					});
					localStorage.setItem('login', false);
					this.$router.replace('/login');
					localStorage.removeItem('uid');
					this.$message({
						type: 'success',
						message: '下线成功!'
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
		},

		//将文件放入
		onFile(e) {
			if (this.$globalVariant.fileChanged) {
				//文件更改了
				this.$alert('您的文件还未保存，请先保存', '提示', {
					confirmButtonText: '确定'
				});
			} else {
				let item = document.getElementsByClassName('el-menu-item is-active');
				if (e[2] === 'note') {
					item[e[1]].style = 'color:#409EFF !important;';
					this.isDraft = false;
					this.fileIndex = e[1];
				} else {
					this.draftIndex = e[1];
					this.isDraft = true;
					this.draftIndex = e[1];
				}
				this.formMess.content = e[0].content;
				this.formMess.topic = e[0].topic;
				this.newNote = false;
			}
		},
		//保存文章/草稿，更新文章
		formSub(e) {
			let userInfo = localStorage;
			if (e == 'article') {
				//旧的文章，然后要更新
				this.$api
					.updateNote({
						id: this.fileList[this.fileIndex].id,
						topic: this.formMess.topic,
						content: this.formMess.content
					})
					.then(() => {
						this.getNote();
						this.$message({
							message: '更新成功',
							type: 'success'
						});
					});
			} else if (e == 'newNote') {
				//发布新文章
				this.$api
					.addNote({
						uid: userInfo.uid,
						topic: this.formMess.topic,
						content: this.formMess.content
					})
					.then(res => {
						console.log(res);
						this.getNote();
						this.$message({
							message: '保存成功',
							type: 'success'
						});
					});
			} else if (e == 'draft') {
				//添加草稿
				this.$api
					.addDraft({
						uid: userInfo.uid,
						topic: this.formMess.topic,
						content: this.formMess.content
					})
					.then(() => {
						this.getDraft();
						this.$message({
							message: '保存成功',
							type: 'success'
						});
						this.addNewNote();
					});
			} else if (e === 'draftToNote') {
				//发表草稿
				this.$api.deleteDraft(this.draftList[this.draftIndex].id).then(res => {
					console.log(res);
					this.draftList.splice(this.draftIndex, 1);
				});
				this.$api
					.addNote({
						uid: userInfo.uid,
						topic: this.formMess.topic,
						content: this.formMess.content
					})
					.then(res => {
						console.log(res);
						this.getNote();
						this.$message({
							message: '发布成功',
							type: 'success'
						});
						this.addNewNote();
					});
			}
			this.$globalVariant.fileChanged = false;
		},

		//删除帖子
		deleteFile(index) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$api.deleteNote(this.fileList[index].id).then(() => {
						this.fileList.splice(this.fileIndex, 1);
						this.addNewNote();
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		},
		deleteDraft(index) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$api.deleteDraft(this.draftList[index].id).then(() => {
						this.draftList.splice(this.draftIndex, 1);
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.addNewNote();
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		},

		/* 设置垃圾箱 */
		hover(e) {
			this.trashIndex = e;
		},
		mover() {
			this.trashIndex = '';
		},
		hoverCrash(e) {
			this.trashIndex1 = e;
		},
		moverCrash() {
			this.trashIndex1 = '';
		},

		addNewNote() {
			this.newNote = true;
			this.formMess.topic = '';
			this.formMess.content = '';
		},

		fileChange() {
			this.$globalVariant.fileChanged = true;
		},

		getNote() {
			this.$api.showNote(localStorage.uid).then(res => {
				this.fileList = res.data;
			});
		},
		getDraft() {
			this.$api.showDraft(localStorage.uid).then(res => {
				this.draftList = res.data;
			});
		},

		//更改个性签名
		changeIntr() {
			this.$prompt('设置个性签名', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			})
				.then(value => {
					this.$api
						.updateIntr({
							info: value.value,
							uid: +localStorage.getItem('uid')
						})
						.then(() => {
							localStorage.setItem('introduce', value.value);
							this.introduce = value.value;
							this.$message({
								type: 'success',
								message: '修改成功'
							});
						});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
		},

		handleAvatarSuccess(res, file) {
			// this.imageUrl = URL.createObjectURL(file.raw);
			console.log(res, file);
		},
		beforeAvatarUpload(file) {
			let temp = file.name.slice(0, -4);
			this.$api
				.updateHeadImg({
					info: `${temp}`,
					uid: localStorage.getItem('uid')
				})
				.then(res => {
					console.log(res);
				});
				this.srcImg = temp
				localStorage.setItem('portrait',temp)
			// const isJPG = file.type === 'image/jpeg';
			// const isLt2M = file.size / 1024 / 1024 < 2;
			// if (!isJPG) {
			// 	this.$message.error('上传头像图片只能是 JPG 格式!');
			// }
			// if (!isLt2M) {
			// 	this.$message.error('上传头像图片大小不能超过 2MB!');
			// }
			// console.log(file);
			// this.mydata.portrait = file
			// return isJPG && isLt2M;
		}
	},

	/* 获取数据 */
	created() {
		this.getDraft();
		this.getNote();
	},

	mounted() {
		let item = document.getElementsByClassName('el-divider--horizontal');
		for (let i of item) {
			i.style = 'margin:0 auto;width:90%';
		}
	}
};
</script>

<style scoped="scoped" lang="scss">
textarea {
	resize: none;
	outline: none;
}
.markdown {
	display: flex;
}
.left {
	width: 13%;
	height: 100vh;
	background-color: #2c3e50;
	.file {
		font-size: 17px;
		width: auto;
		display: flex;
		flex-direction: column;
	}
}

.all {
	flex: 1;
	height: 100vh;

	.form {
		display: flex;
		flex-direction: column;
		height: 100vh;
		align-items: center;

		.top {
			height: 60px;
			display: flex;
			width: 100%;
			justify-content: space-around;
			align-items: center;
			padding: 5px 0;
			background-color: #ebeef5;

			.title {
				width: 70%;
				border-radius: 20px;
				height: 75%;
				padding-left: 25px;
				outline: none;
				font-size: 18px;
				border: 1px solid #ccc;
				margin-left: 20px;
			}
			.button {
				width: 100px;
				border-radius: 20px;
				height: 75%;
				border: 1px solid #fc5531;
				background-color: white;
				color: #fc5531;
				outline: none;
				cursor: pointer;
			}

			.delete {
				cursor: pointer;
			}
		}

		.content {
			display: block;
			height: 100%;
			width: 100%;
			border: 0px;
			padding: 0;
			box-sizing: border-box;
			padding: 30px 50px 0px 60px;
			font-size: 18px;
			background-color: #ebeef56e;
			margin-top: 20px;
		}
	}
}
</style>
